<template>
  <div ref="mContent" class="p-member-content">
    <slot name="filter"></slot>
    <slot></slot>
    <slot name="pagination"></slot>
  </div>
</template>
<script>
import { timeout, throttle, debounce } from '../utils'
export default {
  name: 'mContent',
  props: {
    value: {
      type: [Number, String]
    },
    total: {
      type: Number
    }
  },
  computed: {
    collapsed () {
      return this.$store.state.collapsed
    }
  },
  methods: {
    getPos () {
      const pageElem = this.$slots.pagination && this.$slots.pagination[0].elm
      const filterElem = this.$slots.filter && this.$slots.filter[0].elm
      const pageElemHeight = this.total && pageElem ? pageElem.offsetHeight : 0
      const filterElemHeight = filterElem ? filterElem.offsetHeight : 0
      if (this.$slots.default) {
        const height = this.$parent.$el.offsetHeight - pageElemHeight - filterElemHeight
        this.$emit('input', height)
      }
    }
  },
  mounted () {
    this.$emit('input', this.$parent.$el.offsetHeight)
    this.$nextTick(() => {
      timeout(0).then(() => {
        this.getPos()
      })
    })
    // 防抖
    window.onresize = () => {
      throttle(() => {
        this.getPos()
      }, 600)()
    }
  },
  watch: {
    collapsed () {
      this.$nextTick(() => {
        debounce(() => {
          this.getPos()
        }, 200)()
      })
    },
    total () {
      this.$nextTick(() => {
        timeout(0).then(() => {
          this.getPos()
        })
      })
    }
  }
}
</script>
